<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="test">
    <!-- 
      v-on指令
        作用: 给标签绑定指定事件
        原始语法:  v-on:事件名="回调函数" 
        简化语法:  @事件名="回调函数"
        事件回调函数, 默认接收一个event对象参数

      methods配置:
        包含多个方法/函数的对象
        方法中的this被bind为了vm对象, 注意: method不要用箭头函数
        一般在其中定义事件回调函数, 或者是我们自己需要调用的函数
     -->
    <button v-on:click="test">测试v-on原始语法</button>
    <button @click="test">测试v-on简化语法</button>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const vm = new Vue({
      el: "#test",
      data: {
      
      },

      methods: { // 将methods中所有的方法添加到vm上
        // 事件回调函数, 默认接收一个event对象参数
        test: function (event) {
          alert(event.target.innerHTML)
          this.myFn()
        },

        myFn () {
          console.log('myFn()')
        }
      }
    })
    console.log(vm)
    /* 
    方法是一个特别的属性, 属性值为函数 => 这个属性就称为方法
    */
  </script>
</body>
</html>